import { useState } from "react";
import GpuCanvas from "../../components/GpuCanvas";
// @ts-ignore
import FPSStats from "react-fps-stats";
import DatGui, { DatNumber, DatBoolean } from "react-dat-gui";

type RenderBundlesData = {
  useRenderBundles: boolean;
  asteroidCount: number;
};
export default function RenderBundlesSample() {
  const appName = "RenderBundles";
  const [selectData, setSelectData] = useState<RenderBundlesData>({
    useRenderBundles: true,
    asteroidCount: 5000,
  });
  const onDataUpdate = (newData: RenderBundlesData) => {
    setSelectData(newData);
  };
  return (
    <div style={{
        width: '100%',
        height: '100%',
        position: 'relative',
    }}>
      <FPSStats top={'220px'} left={'610px'}/>
      <GpuCanvas app={appName} data={selectData} />
      <DatGui data={selectData} className="dat-gui" onUpdate={onDataUpdate}>
        <DatBoolean path="useRenderBundles" label="useRenderBundles" />
        <DatNumber path="asteroidCount" label="asteroidCount" min={1000} max={10000} step={1000} />
      </DatGui>
    </div>
  );
}
